<template>
  <div>
    <ul v-infinite-scroll="loadMore" infinite-scroll-immediate-check="false" :infinite-scroll-disabled="isDisabled">
      <li v-for="data in datalist" :key="data.filmId" @click="handleClick(data.filmId)">
        <img :src="data.poster"/>
        <h3>{{ data.name }}</h3>
        <p>主演: {{ data.actors | actorsfilter }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'
import '@/filters/ActorsFilter'

export default {
  name: 'Nowplaying',
  data () {
    return {
      datalist: [],
      isDisabled: false,
      pageNum: 1,
      total: 0
    }
  },
  mounted () {
    this.getData(this.pageNum)
  },
  methods: {
    handleClick (id) {
      // 跳转路由--编程式导航
      this.$router.push(`/detail/${id}`)
      // 带名字的跳转方式
      // this.$router.push({
      //   name: 'detailId',
      //   params: { id: id }
      // })
    },
    loadMore () {
      this.pageNum++
      this.isDisabled = true
      console.log('到底了')
      if (this.datalist.length === this.total) {
        return
      }

      // setTimeout(() => {
      //   this.isDisabled = false
      // }, 10000)
      this.getData(this.pageNum)
    },
    getData (pageNum) {
      axios({
        url: `https://m.maizuo.com/gateway?cityId=440300&pageNum=${pageNum}&pageSize=10&type=1&k=345930`,
        headers: {
          'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"16318468911969714951618561"}',
          'X-Host': 'mall.film-ticket.film.list'
        }
      }).then(res => {
        console.log(res.data)
        this.isDisabled = false
        this.datalist = [...this.datalist, ...res.data.data.films]
        this.total = res.data.data.total
      })
    }
  }
}
</script>

<style scoped lang="scss">
li {
  overflow: hidden;

  img {
    width: 100px;
    float: left;
  }
}
</style>
